<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<!doctype html>
<html>
<head></head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员登录</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css"/>
<script src="${pageContext.request.contextPath}/js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-3.1.1.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css"/>

<style>
  body {
    margin-top: 20px;
    margin: 0 auto;
  }

  .carousel-inner .item img {
    width: 100%;
    height: 300px;
  }

  .container .row div {
    /* position:relative;
    float:left; */
  }

  font {
    color: #3164af;
    font-size: 18px;
    font-weight: normal;
    padding: 0 10px;
  }
</style>
</head>
<body>


<jsp:include page="head.jsp"/>

<div class="container" style="width:100%;background:url('/image/regist_bg.jpg');">
  <div class="row">

    <div class="col-md-2"></div>


    <div class="col-md-8"
         style="background:#fff;padding:40px 80px;margin:30px;border:7px solid #ccc;">
      <font>会员注册</font><span style="color: red" id="warn"></span>
      <form class="form-horizontal" style="margin-top:5px;" method="post">
        <div class="form-group">
          <label for="username" class="col-sm-2 control-label">用户名</label>
          <div class="col-sm-6">
            <input type="text" class="form-control" id="username" placeholder="请输入用户名"
                   name="username">

          </div>
          <span id="username_msg" class="username_msg"></span>
        </div>
        <div class="form-group">
          <label for="password" class="col-sm-2 control-label">密码</label>
          <div class="col-sm-6">
            <input type="password" class="form-control" id="password" placeholder="请输入密码"
                   name="password">
          </div>
        </div>
        <div class="form-group">
          <label for="confirmpwd" class="col-sm-2 control-label">确认密码</label>
          <div class="col-sm-6">
            <input type="password" class="form-control" id="confirmpwd" placeholder="请输入确认密码"
                   name="verifypassword">
          </div>
          <span id="password_msg"></span>
        </div>
        <div class="form-group">
          <label for="email" class="col-sm-2 control-label">Email</label>
          <div class="col-sm-6">
            <input type="email" class="form-control" id="email" placeholder="Email" name="email">
          </div>
        </div>
        <div class="form-group">
          <label for="name" class="col-sm-2 control-label">姓名</label>
          <div class="col-sm-6">
            <input type="text" class="form-control" id="name" placeholder="请输入姓名" name="name">
          </div>
        </div>

        <div class="form-group">
          <label for="telephone" class="col-sm-2 control-label">手机号码</label>
          <div class="col-sm-6">
            <input type="text" class="form-control" id="telephone" placeholder="请输入号码"
                   name="telephone">
          </div>
        </div>

        <div class="form-group opt">
          <label for="inlineRadio1" class="col-sm-2 control-label">性别</label>
          <div class="col-sm-6">
            <label class="radio-inline">
              <input type="radio" name="sex" id="inlineRadio1" value="m" checked> 男
            </label>
            <label class="radio-inline">
              <input type="radio" name="sex" id="inlineRadio2" value="n"> 女
            </label>
          </div>
        </div>
        <div class="form-group">
          <label for="birthday" class="col-sm-2 control-label">出生日期</label>
          <div class="col-sm-6">
            <input type="date" class="form-control" id="birthday" name="birthday">
          </div>
        </div>

        <div class="form-group">
          <label for="code" class="col-sm-2 control-label">验证码</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" id="code" name="code">

          </div>
          <div class="col-sm-2">
            <img id="img" onclick="changeimg(this)" src="${pageContext.request.contextPath}/user/code.do"/>
            <a href="#" id="wengzi" style="font-size: 15px">看不清，换一个</a>
          </div>

        </div>

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <input id="sub" type="button" width="100" value="注册" name="submit" border="0"
                   style="background: url(${pageContext.request.contextPath}'/images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
							height:35px;width:100px;color:white;">
          </div>
        </div>
      </form>
    </div>

    <div class="col-md-2"></div>

  </div>
</div>

<jsp:include page="foot.jsp"/>

</body>
<script>

  $("#wengzi").click(function () {
    $("#img").attr("src", "${pageContext.request.contextPath}/user/code.do?i=" + Math.random());
    console.log($("#img").src);
  })

  function changeimg(obj) {
    obj.src = "${pageContext.request.contextPath}/user/code.do?i=" + Math.random();
  }

  //		用户名是否被占用 JQuery
  $("#username").blur(function () {
    $Uname = $(this).val();
    $.get("${pageContext.request.contextPath}/user/check.do", "username=" + $Uname,
        function (d) {
          if (d.msc == 1) {
            $("#username_msg").html("<p style='color: green'>用户名可以使用</p>");
            $("#sub").attr("disabled", false);

          } else if (d.msc == 0) {
            $("#username_msg").html("<p style='color: red'>用户名已被占用</p>");
            $("#sub").attr("disabled", true);
          }

        })
  });

  $("#confirmpwd").blur(
      function () {
        $.get("${pageContext.request.contextPath}/user/checkPassword.do",
            {
              password: $("#password").val(),
              uPassword: $("#confirmpwd").val()
            },
            function (d) {
              if (d.msc == 1) {
                $("#password_msg").html("<p style='color: green'>√</p>");
                $("#sub").attr("disabled", false);
              } else if (d.msc == 0) {
                $("#password_msg").html("<p style='color: red'>×</p>");
                $("#sub").attr("disabled", true);
              }

            })
      });

  $("#sub").click(function () {
    $.get("${pageContext.request.contextPath}/user/register.do",
        {
          username: $("#username").val(),
          password: $("#password").val(),
          email: $("#email").val(),
          name: $("#name").val(),
          telephone: $("#telephone").val(),
          birthday: $("#birthday").val(),
          code: $("#code").val(),
          sex: $("input[name='sex']:checked").val()
        },
        function (d) {

          if (d.msc == -1) {
            $("#warn").html("内容错误，请重新输入验证码");
          } else {
            $("#warn").html("");
            location.href = "${pageContext.request.contextPath}/user/gotomsg.do?msg=" + d.data.msg + "&address=" + d.data.address;

          }
        },
        "json"
    )
  })
</script>
</html>




